<template>
  <div class="ep-counter-page">
    <h2>Element Plus 组件化计数教程</h2>

    <el-card class="demo-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>组件化计数器（ElInputNumber + ElButton）</span>
        </div>
      </template>

      <div class="content-row">
        <el-space wrap>
          <el-input-number v-model="count" :min="0" :max="9999" :step="step" />
          <el-button type="primary" @click="increment">增加</el-button>
          <el-button type="warning" @click="decrement" :disabled="count === 0">减少</el-button>
          <el-button type="danger" @click="reset" :disabled="count === 0">重置</el-button>
        </el-space>
      </div>

      <div class="content-row">
        <el-space>
          <el-tag type="success">当前计数：{{ count }}</el-tag>
          <el-tag type="info">步进：{{ step }}</el-tag>
          <el-input-number v-model="step" :min="1" :max="100" />
        </el-space>
      </div>

      <el-divider />

      <div class="tips">
        <p>要点：</p>
        <ul>
          <li>全局注册 Element Plus 后，直接使用 <code>&lt;el-button&gt;</code>、<code>&lt;el-input-number&gt;</code> 等组件。</li>
          <li>通过 <code>v-model</code> 绑定响应式数据，实现双向输入与状态管理。</li>
          <li>搭配 <code>ElSpace</code>、<code>ElCard</code>、<code>ElTag</code> 组织布局与信息展示。</li>
        </ul>
      </div>
    </el-card>

    <el-card class="code-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>关键代码</span>
        </div>
      </template>
      <pre class="code"><code>import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// main.js
const app = createApp(App)
app.use(ElementPlus)

// 视图中
const count = ref(0)
const step = ref(1)
const increment = () => (count.value += step.value)
const decrement = () => (count.value = Math.max(0, count.value - step.value))
const reset = () => (count.value = 0)</code></pre>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const step = ref(1)
const increment = () => { count.value += step.value }
const decrement = () => { count.value = Math.max(0, count.value - step.value) }
const reset = () => { count.value = 0 }
</script>

<style scoped>
.ep-counter-page { padding: 20px; }
.demo-card { margin-bottom: 16px; }
.code-card { margin-top: 16px; }
.card-header { display: flex; align-items: center; justify-content: space-between; }
.content-row { margin: 12px 0; }
.tips ul { margin: 8px 0 0; padding-left: 20px; }
.code { background: #1e1e1e; color: #dcdcdc; padding: 12px; border-radius: 8px; overflow: auto; }
</style>